<!--
 * @userName: 湫之恋
 * @Author: Seven
 * @Date: 2020-07-01 14:28:44
 * @LastEditors: Seven
 * @LastEditTime: 2020-07-01 23:16:05
 -->
<template>
  <div>
    <searchFor></searchFor>
    <el-table :data="estimate" border style="width: 100%">
      <el-table-column fixed prop="rentId.name" align="center" label="出租人姓名" width="150"></el-table-column>
      <el-table-column prop="hireId.name" label="租赁人项目" align="center" width="120"></el-table-column>
      <el-table-column prop="carId.carname" label="车辆品牌" align="center" width="120"></el-table-column>
      <el-table-column prop="carId.modelNumber" label="车辆型号" align="center" width="120"></el-table-column>
      <el-table-column prop="carId.licencePlate" label="车牌" align="center" width="120"></el-table-column>
      <el-table-column prop="orderId._id" label="订单编号" align="center" width="220"></el-table-column>
      <el-table-column prop="estimateDate" label="评价时间" align="center" width="120"></el-table-column>
      <el-table-column prop="estimateNumber" label="评价等级" align="center" width="120"></el-table-column>
      <el-table-column prop="estimateContent" label="评价内容" align="center" width="250"></el-table-column>
      <el-table-column fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="removeClick(scope)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <div class="paginationMain">
        <span @click="myfirstPage">首页</span>
        <span @click="myprevious">上一页</span>
        <span @click="mynextPage">下一页</span>
        <span @click="mymaxPage">尾页</span>
        <i>当前页:{{pageNumber}}   总页数:{{maxNumbers}}</i>
      </div>
    </div>
  </div>
</template>
<script>
import searchFor from "./searchFor/searchFor";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "estimate"
);
export default {
  components: {
    searchFor
  },
  data() {
    return {};
  },
  computed: {
    ...mapState([
      "estimate",
      "estimateNumber",
      "pageNumber",
      "maxNumbers",
      "bool"
    ])
  },
  methods: {
    ...mapActions(["getEstimateAllAsync", "getEstimateByEstimateNumberAsync"]),
    ...mapMutations(["firstPage", "previous", "nextPage", "maxPage"]),
    // 公共逻辑，判断当前模块
    getApi() {
      if (this.estimateNumber == "all") {
        this.getEstimateAllAsync();
      } else {
        this.getEstimateByEstimateNumberAsync({estimateNumber:this.estimateNumber});
      }
    },
    removeClick(res) {
      console.log(res);
    },

    myfirstPage() {
      this.firstPage();
      console.log(this.bool)
      if (this.bool) {
        this.getApi();
      }
    },
    myprevious() {
      this.previous();
      if (this.bool) {
        this.getApi();
      }
    },
    mynextPage() {
      this.nextPage();
      if (this.bool) {
        this.getApi();
      }
    },
    mymaxPage() {
      this.maxPage();
      if (this.bool) {
        this.getApi();
      }
    }
  },
  async created() {
    await this.getEstimateAllAsync();
  }
};
</script>

<style scoped>
.el-main[data-v-452a4712] {
  text-align: center !important;
}
.el-table td,
.el-table th {
  text-align: center !important;
}
.pagination .paginationMain {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  align-content: center;
}
.pagination .paginationMain i{
  line-height: 30px;
}
.pagination .paginationMain span {
  display: block;
  width: 50px;
  height: 30px;
  border: 1px solid #999;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.pagination .paginationMain span:hover {
  border: 1px solid #f3a83f;
  color: #f3a83f;
}
</style>